import React, { Component, createContext, createRef } from 'react'
import milk from '../data/豆奶制品.json'
import veg from '../data/蔬菜类.json'
import rice from '../data/主食.json'
import Nav from '../components/Nav'
import Son from './Son'
import { Provider } from '../GlobalContext'
// const { Provider, Consumer } = createContext()
function Temp(props) {
    return <div>
        我是函数式组件
    </div>
}

class Parent extends Component{
    render() {
        console.log(this.props.children)
        return <div>
            我是parent组件
            <Son></Son>
            {this.props.children}
        </div>
    }
}
class MyAlert extends Component{
    render() {
        return <div className="box">
            {
                this.props.list.map((item, key) => <div key={key}>{item.name}</div>)
            }
        </div>
    }
}
class Index extends Component {
    constructor(props) {
        super(props)
        this.testRef = React.createRef()
    }
    // 成员属性
    state = {
        activeNav: '主食',
        list: milk.concat(veg.concat(rice)),
        veg: veg,
        rice: rice,
        milk: milk,
        name: 'react'
    }
    yeye(val) {
        console.log('爷爷的函数，值收到的是', val)
    }
    switchNav(nav) {
        this.setState({
            activeNav: nav
        }, ()=>{
            console.log('更新完成', this.state.activeNav)
            // 发请求1
        })
        // 发请求2
    }
    switchStatus(name) {
        let { list } = this.state
        list = list.map(item => {
            if(item.name === name) {
                // 找到了某项食物
                item.flag = item.flag ? false : true
            }
            return item
        })
        // 更新视图
        this.setState({
            list:list
        })
    }
    testEvent(){
        console.log(123, this.testRef.current)
        console.log(123, this.refs.helloSpan)
    }
    render() {
        return <Provider value={{name: this.state.name, yeyeFn: this.yeye}}>
        <div>
            <button ref={this.testRef} onClick={() => this.testEvent()}>点点点</button>
            <span >hello</span>
            <Temp name="temp"></Temp>
            <Parent ref="helloSpan">
                <div>你好</div>
            </Parent>
                <Nav switchNav={(nav)=>this.switchNav(nav)} activeNav={this.state.activeNav}></Nav>
            <div>
                {/* {
                    activeNav === '主食' ? 
                (this.state.rice.map((item, key) => <div key={key}>{item.name}</div>)) : (activeNav === '蔬菜' ? (this.state.veg.map((item, key) => <div key={key}>{item.name}</div>)):(this.state.milk.map((item, key) => <div key={key}>{item.name}</div>)))
                } */}
                {
                    this.state.list.filter(item => {
                      if(this.state.activeNav === '主食') {
                          return item.category_id == 1
                      }  else if(this.state.activeNav === '蔬菜') {
                          return item.category_id == 3
                      } else {
                        return item.category_id == 2
                      }
                    }).map((item, key) => <div style={{color: item.flag ? 'yellow' : '#333'}} key={key} onClick={() => this.switchStatus(item.name)}>{item.name}</div>)
                }
            </div>
            <MyAlert list={this.state.list.filter(item => item.flag)}></MyAlert>
        </div>
        </Provider>
    }
}
export default Index